<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>定位导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 12px;
            line-height: 1.7;
        }

        .shop_body {
            width: 800px;
            height: auto;
            margin: 0 auto;
            padding: 20px;
        }

        .item {
            padding: 20px;
            border: 1px dotted #0088bb;
            margin-bottom: 20px;

        }

        .shop_body .item li {
            display: inline;
            list-style-type: none;
            margin-right: 10px;
        }

        .shop_body .item li a img {
            width: 230px;
            height: 230px;
        }

        .shop_body .item h2 {
            font-size: 16px;
            border-bottom: 2px solid #0088bb;

            margin-bottom: 10px;
        }

        .shop_body h1 {
            color: #0088bb;

        }

        #daohang {
            position: fixed;
            top: 100px;
            left: 50%;
            margin-left: 400px;
            width: 50px;
        }

        #daohang li {
            list-style-type: none;

        }

        #daohang li a {
            text-decoration: none;
            display: list-item;
            width: 80px;
            height: 50px;
            color: #333;
            font-size: 14px;
            font-weight: bold;
            line-height: 50px;
            text-align: center;
            margin: 5px 0;

        }

        #daohang li a:link, a:visited {
            color: #333;
        }

        #daohang li a:hover, #daohang li a:active, .self {
            background-color: #0088bb;
            color: #ffffff;
        }
    </style>
</head>
<body>
<div id="daohang">
    <ul>
        <li><a class="self" href="#item1">1F 男装</a></li>
        <li><a href="#item2">2F 女装</a></li>
        <li><a href="#item3">3F 美妆</a></li>
        <li><a href="#item4">4F 数码</a></li>
        <li><a href="#item5">5F 母婴</a></li>
    </ul>
</div>


<div class="shop_body">
    <h1>地狗购物网</h1>

    <div id="item1" class="item">
        <h2>1F 男装</h2>
        <ul>
            <li><a href="#"><img src="./img/1F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/1F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/1F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/1F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/1F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/1F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/1F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/1F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/1F.jpg" alt=""/></a></li>
        </ul>
    </div>
    <div id="item2" class="item">
        <h2>1F 女装</h2>
        <ul>
            <li><a href="#"><img src="./img/2F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/2F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/2F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/2F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/2F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/2F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/2F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/2F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/2F.jpg" alt=""/></a></li>
        </ul>
    </div>
    <div id="item3" class="item">
        <h2>1F 美妆</h2>
        <ul>
            <li><a href="#"><img src="./img/3F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/3F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/3F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/3F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/3F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/3F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/3F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/3F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/3F.jpg" alt=""/></a></li>
        </ul>
    </div>
    <div id="item4" class="item">
        <h2>1F 数码</h2>
        <ul>
            <li><a href="#"><img src="./img/4F.png" alt=""/></a></li>
            <li><a href="#"><img src="./img/4F.png" alt=""/></a></li>
            <li><a href="#"><img src="./img/4F.png" alt=""/></a></li>
            <li><a href="#"><img src="./img/4F.png" alt=""/></a></li>
            <li><a href="#"><img src="./img/4F.png" alt=""/></a></li>
            <li><a href="#"><img src="./img/4F.png" alt=""/></a></li>
            <li><a href="#"><img src="./img/4F.png" alt=""/></a></li>
            <li><a href="#"><img src="./img/4F.png" alt=""/></a></li>
            <li><a href="#"><img src="./img/4F.png" alt=""/></a></li>
        </ul>
    </div>
    <div id="item5" class="item">
        <h2>1F 母婴</h2>
        <ul>
            <li><a href="#"><img src="./img/5F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/5F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/5F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/5F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/5F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/5F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/5F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/5F.jpg" alt=""/></a></li>
            <li><a href="#"><img src="./img/5F.jpg" alt=""/></a></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    window.onload = function () {
        window.onscroll = function () {
            var daohang = document.getElementById('daohang');
            var daohang_a = daohang.getElementsByTagName('a');
            var item = document.getElementsByClassName('item');
            var top = document.documentElement.scrollTop || document.body.scrollTop;//滚动条滚动高度
            var flag_id = '';//用于保存当前滚动条所在楼层ID
            for (var i = 0; i < item.length; i++) {
                if (top > item[i].offsetTop - 200) {
                    flag_id = item[i].id;
                    //console.log(flag_id);
                }
                else {
                    break;
                }
            }
            //获取当前所滚动到的item的楼层ID
            if (flag_id !== true) {
                for (var x = 0; x < daohang_a.length; x++) {
                    var _href = daohang_a[x].href.split('#');//保存当前a链接的href地址，并通过split拆分出ID
                    if (_href[_href.length - 1] !== flag_id) {
                        daohang_a[x].className = '';
                        //console.log(daohang_a[x]);
                        console.log(_href)
                    }
                    else {
                        daohang_a[x].className = 'self';
                    }
                }
            }

        }
    }
</script>
</body>
</html>